<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>姓名案例_methods实现</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
     <div id = "name">
        姓：<input type="text" v-model:value="firstName"></input><br/> <!---双向绑定对data进行数据修改-->
        名：<input type="text" v-model:value="lastName"></input><br/>
        姓名：<span>{{fullName}}</span> <!--此时读取时不能使用fullName(),fullName只是vm的一个属性名称-->
        姓名：<span>{{fullName}}</span> <!--读取缓存-->
        姓名：<span>{{fullName}}</span> 
     </div>
     <script>
        const vm = new Vue({
            el: '#name',
            data:function(){
                return {
                    firstName:'张',
                    lastName:'三'
                }
            },
            computed:{
                // fullName: function(){ //当计算属性只有存在计算的时候，也就是只需要get()，而不需要set()时才可以去简写，这里的function()就是执行get()方法，将计算的结果放在vm.fullName上
                //     return this.firstName +'-'+this.lastName
                // }

                fullName(){ //当计算属性只有存在计算的时候，也就是只需要get()，而不需要set()时才可以去简写，这里的function()就是执行get()方法，将计算的结果放在vm.fullName上
                    return this.firstName +'-'+this.lastName
                }
            }
        })
     </script>
</body>
</html>